<script setup>
import useAuthStore from '@/store/auth'
import api from '@/api'
import { useRouter } from 'vue-router'
import { showNotify } from 'vant'
import { ref } from 'vue'

const $authStore = useAuthStore()
const $router = useRouter()

const listData = ref([])
const getWatch = async () => {
  try {
    const res = await api.get('ip/user/watch')
    var list = res.data.data
    for (const item of list) {
      item.section.durationText = transformDuration(item.section.duration, true)
    }
    listData.value = list
    // formShow.value = false
  } catch (error) {
    console.error(error)
  }
}

const transformDuration = (duration, full) => {
  var hours = Math.floor(duration / 3600)
  var minutes = Math.floor((duration - hours * 3600) / 60)
  var seconds = duration % 60

  if (hours || full) {
    hours = hours.toString().padStart(2, '0') + ':'
  } else {
    hours = ''
  }
  minutes = minutes.toString().padStart(2, '0')
  seconds = seconds.toString().padStart(2, '0')

  // 拼接并返回结果
  return hours + minutes + ':' + seconds
}

const onClickLeft = () => {
  $router.go(-1)
}

getWatch()
</script>

<template>
  <div class="page-profile">
    <van-nav-bar title="学习记录" left-text="返回" left-arrow @click-left="onClickLeft"> </van-nav-bar>

    <van-empty v-if="!listData.length"
               description="暂无数据" />

    <div class="lists"
         v-for="(item,index) in listData"
         :key="index">
      <div class="cover_img">
        <img :src="item.section.image_url"
             alt="">
      </div>
      <div class="info_cell">
        <div class="name">{{ item.section.name }}</div>
        <div class="duration">时长：{{ item.section.durationText }}</div>
        <div class="created_at">{{ item.section.created_at }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.lists {
  box-sizing: border-box;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
}
.cover_img {
  width: 153px;
  height: 98px;
  flex-shrink: 0;
}
.cover_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info_cell {
  width: calc(100% - 163px);
  height: 98px;
}
.info_cell .name {
  width: 100%;
  height: 50px;
  margin-bottom: 5px;
}
.info_cell .duration {
  margin-bottom: 15px;
  font-size: 12px;
}
.info_cell .created_at {
  font-size: 12px;
  color: #a1a1a1;
}
</style>
